<template>
	<div class="view">
		<!-- 头部  -->
		<div class="header">
			<div class="h_exit" style="cursor: pointer;" @click="to_exit">
				<i class="i-16 i-exit i-mr-10"></i>返回上一页
			</div>
			<div class="h_title">修改广告
			</div>
		</div>
		<!-- 头部 end -->


		<!-- 主体部分 -->
		<div class="main">
			<div class="main_con" :style="{ height: con_height + 'px' }">
				<el-form label-width="110px" :model="form" ref="form" :rules="rules" label-position="top">
					<div class="div_view">
						<div class="div_title">基本信息</div>
						<el-form-item label="广告位置：" prop="sort">
							<el-select v-model="form.sort" placeholder="请选择" style="width: 320px;">
								<el-option v-for="(item, index) in sortList" :key="item.id" :label="item.sort"
									:value="item.sort">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="广告标题：" prop="title">
							<el-input style="width: 320px;" v-model="form.title"></el-input>
						</el-form-item>
						<el-form-item label="外链：" prop="url">
							<el-input style="width: 320px;" suffix-icon="el-icon-paperclip" v-model="form.url"></el-input>
						</el-form-item>
						<el-form-item label="列表图(PC)：" style="margin-right: 20px;">
							<div @click="uploadPicture('flagImg', '1')" v-if="form.picdir == ''">
								<el-upload :action="img_upload" list-type="picture-card" :auto-upload="false" :limit="1"
									:disabled="true">
									<i slot="default" class="el-icon-plus"></i>
									<div slot="file" slot-scope="{file}">
										<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.picdir" alt="">
									</div>
								</el-upload>
							</div>
							<div class="img_box" v-else @click="uploadPicture('flagImg', '1')">
								<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.picdir" alt="">
								<div class="img_tip">
									<div class="img_big" @click.stop="imgBig('1')">
										<i class="el-icon-zoom-in"></i>
									</div>
									<div class="img_remove" @click.stop="imgRemove('1')">
										<i class="el-icon-delete"></i>
									</div>
								</div>
							</div>
						</el-form-item>
						<!-- <el-form-item label="列表图(手机端)：">
							<div @click="uploadPicture('flagImg', '2')" v-if="form.picdirWap == ''">
								<el-upload :action="img_upload" list-type="picture-card" :auto-upload="false" :limit="1"
									:disabled="true">
									<i slot="default" class="el-icon-plus"></i>
									<div slot="file" slot-scope="{file}">
										<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.picdirWap" alt="">
									</div>
								</el-upload>
							</div>
							<div class="img_box" v-else @click="uploadPicture('flagImg', '2')">
								<img class="el-upload-list__item-thumbnail" :src="$api.imgUrl+form.picdirWap" alt="">
								<div class="img_tip">
									<div class="img_big" @click.stop="imgBig('2')">
										<i class="el-icon-zoom-in"></i>
									</div>
									<div class="img_remove" @click.stop="imgRemove('2')">
										<i class="el-icon-delete"></i>
									</div>
								</div>
							</div>
						</el-form-item> -->
						<el-form-item label="简介" prop="shorts">
							<el-input type="textarea" :rows="2" placeholder="请输入广告" v-model="form.shorts"
								style="width: 800px;">
							</el-input>
						</el-form-item>
						<el-form-item>
							<div class="item">
								<div class="item_label">是否隐藏：</div>
								<div class="item_val">
									<el-switch v-model="form.isHidden" active-color="#13ce66" inactive-color="#A5ADBA"
										:active-value="1" :inactive-value="0">
									</el-switch>
								</div>
							</div>

						</el-form-item>
						<el-form-item label="排序权重：" prop="orderid">
							<el-input style="width: 320px;" v-model="form.orderid"></el-input>
						</el-form-item>
					</div>
				</el-form>
			</div>
			<div class="main_btn">
				<el-button type="primary" icon="el-icon-check" size="medium" @click="submitForm('form')"
					:disabled="isAdd">完成，确认提交
				</el-button>
			</div>
		</div>
		<!-- 主体部分 -->

		<!-- 尾部 -->
		<template>
			<Footer></Footer>
		</template>
		<!-- 尾部 end' -->


		<!-- 图片裁剪弹窗 -->
		<el-dialog title="裁切封面" :visible.sync="cropperModel" width="1120px" center :close-on-click-modal="false">
			<cropper-image :Name="cropperName" @uploadImgSuccess="handleUploadSuccess" ref="child" :mode="mode">
			</cropper-image>
		</el-dialog>

		<!--查看大封面-->
		<el-dialog title="查看大封面" :visible.sync="imgVisible" center :close-on-click-modal="false">
			<img :src="$api.imgUrl+imgName" v-if="imgVisible" style="width: 100%" alt="查看">
		</el-dialog>

		<FileUpload @fileChange="fileChange" ref="file" accept="image/*"></FileUpload>

	</div>
</template>

<script>
import Footer from "../../components/footer.vue"
import ueditor from "../../components/ueditor.vue"
import CropperImage from "../../components/CropperImage.vue";
import { mapState } from "vuex"
import FileUpload from "@/components/FileUpload.vue"
export default {
	data() {
		return {
			con_height: document.documentElement.clientHeight - 264,
			sort_list: [],
			defaultprops: {
				children: 'catalogNodeVos',
				label: 'sort',
				value: 'id',
				checkStrictly: true
			},
			form: {
				shorts: '', // 咨询简介
				picdir: '', // 列表图（pc)
				picdirWap: '', // 列表图（wap）*隔开
				title: '', // 广告标题
				url: '', // 外链
				orderid: '', // 排序权重
				isHidden: 0,
				sort: "",
				id: "",
			},
			sortList: [],
			rules: {
				title: [{
					required: true,
					message: '请输入广告标题',
					pattern: '[^ \x22]+',
					trigger: 'true'
				}],
				sort: [{
					required: true,
					message: '请选择位置',
					pattern: '[^ \x22]+',
					trigger: 'true'
				}],
				cataid: [{
					required: true,
					message: '请选择目录',
					trigger: 'change'
				}],
				timePublish: [{
					required: true,
					message: '请选择发布时间',
					pattern: '[^ \x22]+',
					trigger: 'blur'
				},

				],
			},
			id: '',
			p_index: '',

			formValidate: {
				mainImage: '',
			},
			ruleValidate: {
				mainImage: [{
					required: true,
					message: '请上传封面',
					trigger: 'blur'
				}],
			},
			//裁切图片参数
			cropperModel: false,
			cropperName: '',
			imgName: '',
			imgVisible: false,
			mode: [500, 1162],


			img_upload: "",

			name: this.$root.ptName,
			picdir: this.$root.ptPicdir,

			isAdd: false,
		}
	},
	computed: {
		...mapState(['urlParma']),
		cnt_rule() {
			let rule = [{
				required: true,
				message: '请输入广告详情',
				trigger: 'change'
			},]

			if (this.form.url != '') {
				rule = [{
					required: false,
					message: '请输入广告详情',
					trigger: 'change'
				},]
			}
			return rule
		}
	},
	components: {
		Footer,
		ueditor,
		CropperImage,
		FileUpload
	},
	methods: {
		fileChange(data){
			if (this.p_index == '1') {
				this.form.picdir = data
			} else if (this.p_index == '2') {
				this.form.picdirWap = data
			}
		},
		dataDetail() {
			this.$http({
				url: this.$api.adDetail + this.urlParma.id
			}).then(res => {
				if (res.data.code == 20000) {
					const { detail } = res.data.data;
					this.form = {
						id: detail.id,
						isHidden: detail.isHidden,
						orderid: detail.orderid,
						picdir: detail.picdir,
						picdirWap: detail.picdirWap,
						shorts: detail.shorts,
						sort: detail.sort,
						title: detail.title,
						url: detail.url,
					}
				}
			})
		},

		// 返回上一页
		to_exit() {
			this.$router.go(-1)
		},

		// 
		handleChange(value) {
			console.log(value);
		},


		// 加载目录列表
		data_init() {
			this.$http({
				'method': 'get',
				'url': this.$api.adSortList
			}).then(res => {
				if (res.data.code == 20000) {
					this.sortList = res.data.data.list
				}
			})
		},


		// 图片放大
		imgBig(type) {
			if (type == '1') {
				this.imgName = this.form.picdir
			} else if (type == '2') {
				this.imgName = this.form.picdirWap
			}

			this.imgVisible = true
		},

		// 图片删除
		imgRemove(type) {
			if (type == '1') {
				this.form.picdir = ""
			} else if (type == '2') {
				this.form.picdirWap = ""
			}
		},

		// 图片上传
		uploadPicture(name, p_index) {
			this.p_index = p_index
			this.$refs.file.open()
			// this.cropperName = name;
			// this.cropperModel = true;
			// this.$nextTick(() => {
			// 	this.$refs.child.clear()
			// })
		},

		//图片上传成功后
		handleUploadSuccess(data) {
			console.log(data)
			console.log(this.p_index)
			this.cropperModel = false;
			this.cropperName = '';
			if (this.p_index == '1') {
				this.form.picdir = data
			} else if (this.p_index == '2') {
				this.form.picdirWap = data
			}
		},


		// 上传
		upload() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.$http({
						'method': 'post',
						'url': this.$api.adUpdate,
						data: this.form
					}).then(res => {
						if (res.data.code == 20000) {
							this.$message({
								type: 'success',
								message: res.data.message
							})
							this.$router.go(-1)
						} else {
							this.$message.error(res.data.message)
						}
						this.isAdd = false
					})

				}
			})

		},

		// 提交时表单验证
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.isAdd = true
					this.upload()
				}
			});
		},
	},
	mounted() {

	},
	created() {
		this.data_init()
		this.dataDetail();
	},
}
</script>

<style scoped>
@import url("../../assets/css/infoAdd.css");

.h_user * {
	cursor: pointer;
}

.div_title {
	font-size: 16px;
	color: #333;
	font-weight: bold;
}

.header {
	background-color: #fff;
}
</style>
